<template>
  <el-dialog v-model="interfaceCatFormDialogVisible" :title="interfaceCatFormDialogTitle" width="600" draggable>
    <el-form ref="interfaceCatFormRef" :model="interfaceCatFormData" :rules="interfaceCatRules" label-width="130px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="项目名称:">
            <el-input style="width: 100%;"
                      disabled
                      v-model="currentProject"
                      >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上级模块名称:">
            <el-input style="width: 100%;"
                      disabled
                      v-model="currentProject"
                      >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="模块名称:" prop="label">
            <el-input ref="interfaceCatNameRef" style="width: 100%;"
                      v-model="interfaceCatFormData.label"
                      placeholder=请输入模块名称>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="">取消</el-button>
        <el-button type="primary" :loading="loading" @click="commitInterfaceCatFrom(interfaceCatFormRef)">确定
        </el-button>
      </div>
    </template>

  </el-dialog>
</template>

<script setup>

import {nextTick, reactive, ref} from "vue";
import {useInterfaceStore} from "@/stores/modules/interface/interface.js";
import {storeToRefs} from "pinia";
import {ElMessage} from "element-plus";
import {useProjectStore} from "@/stores/modules/project/project.js";
import {postInterfaceCatApi} from "@/api/modules/interface/interface.js";

const interfaceStore = useInterfaceStore()
const projectStore = useProjectStore()
const {currentProject,currentProjectId} =storeToRefs(projectStore)

const interfaceCatFormDialogVisible = ref(false)
const interfaceCatFormDialogTitle = ref("")
const interfaceCatFormData = ref({
  project:currentProjectId.value,
  parentId:"1758382802958954496"
})
const interfaceCatRules = reactive({
  label: [{required: true, message: "请输入模块名称", trigger: "blur"}],
});

const interfaceCatNameRef = ref()
// 打开模态框
const showInterfaceCatFrom = (formType, interfaceCatId = undefined) => {
  interfaceCatFormDialogVisible.value = true
  if (formType === "create") {
    interfaceCatFormDialogTitle.value = "新增模块"
  }
  if (formType === "update") {
    interfaceCatFormDialogTitle.value = "编辑模块"
  }
  // 打开模态框后，自动聚焦到模块名输入框
  nextTick(()=>{
    setTimeout(()=>{
      interfaceCatNameRef.value.focus()
    },300)
  })
}

const interfaceCatFormRef = ref()
const loading = ref(false);
// 提交表单
const commitInterfaceCatFrom = (formEl) => {
  if (!formEl) return;
  formEl.validate(async valid => {
    if (!valid) return;
    loading.value = true;
    try {
      postInterfaceCatApi(interfaceCatFormData.value).then(res=>{
        ElMessage.success("成功")
        interfaceCatFormDialogVisible.value = false
        interfaceStore.getInterfaceCatTree()
      })

    } finally {
      loading.value = false;
    }
  })
}

// 关闭模态框
const cancelInterfaceCatFrom = () => {

}

defineExpose({
  showInterfaceCatFrom
})

</script>

<style scoped lang="scss">

</style>
